import React from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  Dimensions
} from 'react-native'
import _ from 'lodash'

import Icon from 'react-native-vector-icons/Ionicons'


const defaultStyle = {
  backgroundStyle: {
    backgroundColor: 'rgb(33, 150, 243)',
    borderRadius: 6,
    paddingTop: 11,
    paddingBottom: 11,
    // paddingLeft: 40,
    // paddingRight: 40,
    alignItems: 'center',
    width: 105,
    flexDirection: 'row',
    justifyContent: 'center'
  },

  titleStyle: {
    color: 'white',
    fontWeight: 'bold',
  },
}

export const Button = ({
  title = '',
  backgroundStyle = {},
  style = {},
  onPress = () => { },
  icon
}) => {
  const bStyle = _.merge({}, defaultStyle.backgroundStyle, backgroundStyle)
  const tStyle = _.merge({}, defaultStyle.titleStyle, style)


  const content = !icon ?
    <Text style={tStyle}>{title}</Text> :
    <><Icon name={icon} color={'white'} size={18} /><Text style={tStyle}>{title}</Text></>
  return (
    <TouchableOpacity onPress={onPress} style={bStyle} activeOpacity={0.7}>
      {content}
    </TouchableOpacity>
  )
}

export const SubscribeButton = (props) => (
  <Button
    {...props}
    icon={'md-add'}
    backgroundStyle={{
      paddingBottom: 4,
      paddingTop: 4,
      width: 66,
      borderRadius: 30,
    }}
  />
)

export const TagButton = (props) => (
  <Button
    backgroundStyle={{
      backgroundColor: props.backgroundColor,
      borderWidth: 0,
      borderColor: props.color,
      borderRadius: 30,
      width: 'auto',
      paddingBottom: 6, paddingTop: 6,
      paddingLeft: 12, paddingRight: 12,
      marginRight: 6, marginBottom: 4,
    }}
    style={{ color: props.color, fontSize: 10 }}
    {...props}
  />
)

export const CategoryButton = (props) => (
  <Button
    backgroundStyle={{
      backgroundColor: props.backgroundColor,
      borderWidth: 0,
      borderColor: props.color,
      borderRadius: 30,
      width: 84,
      paddingBottom: 6, paddingTop: 6,
      marginRight: 6, marginBottom: 8,
    }}
    style={{ color: props.color, fontSize: 11 }}
    {...props}
  />
)
